<template>
  <view class="menu-container">
    <wd-row :gutter="16">
      <wd-col v-for="(item, index) in btnList" :key="item.name" :span="12">
        <view class="menu-card" :class="`menu-card-${index % 4}`" @click="jump(item.path)">
          <view class="menu-content">
            <text class="menu-text">{{ item.name }}</text>
            <wd-icon name="arrow-right" size="18px" color="#fff" />
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
</template>

<script setup lang="ts">
import { jump, checkUpdate } from '@/utils/common';
import { ref } from 'vue';

const btnList = ref([
  {
    name: '四象限工具',
    path: '/pages/fourQuadrant/index'
  },
  {
    name: '预发朋友圈',
    path: '/pages/moments/index'
  },
  {
    name: 'Uniapp案例演示',
    path: '/pages/demo/index'
  },
  // 可以继续添加更多卡片，间距会自动生效
  // {
  //   name: '新功能示例',
  //   path: '/pages/new-feature/index'
  // }
]);

onShow(() => {
  console.log('检查版本更新');
  checkUpdate();
});

onShareAppMessage(() => ({
  title: '首页',
  path: '/pages/index/index'
}));
</script>

<style lang="scss" scoped>
.menu-container {
  padding: 16px 0;
}

.menu-card {
  height: 100px;
  border-radius: 12px;
  display: flex;
  margin-bottom: 16px;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  &-0 {
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  }

  &-1 {
    background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
  }

  &-2 {
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
  }

  &-3 {
    background: linear-gradient(135deg, #a6c1ee 0%, #fbc2eb 100%);
  }
}

.menu-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-text {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.menu-card:active {
  transform: scale(0.98);
  opacity: 0.9;
}
</style>
